<?php 
	$table = $this->table;
	$search_mode = $this->search_mode;
?>

<!-- Normal mode display -->
<?php if(!$search_mode):?>

<section class="grid_12"> <!-- pagination table -->
	<!-- 検索フォーム -->
	<div class="block-border" style="margin-bottom: 20px;">
    	<div class="block-content">
	        <h1>検索</h1>
	       <form method="post" class="form" action="/user/order/list-order" id="search_form">
	        	<p>
        			<label for="start_time" class="inline">始め時間</label>
		        	<?php echo $this->formText("start_time")?>
		        	
		        	<label for="end_time" class="inline">終わり時間</label>
		        	<?php echo $this->formText("end_time")?>
		        	
		        </p>
		        
		        <p>
		        	<label for="start_time" class="inline">予約状態</label>
					<?php echo $this->formSelect("status", NULL, NULL, $this->order_status_list)?>
					<label for="room_code" class="inline">会議室/ブース</label>
					<?php echo $this->formSelect("room", NULL, NULL, $this->room_code_list)?>		        	      	
		        	<button type="submit" id="save_btn">検索</button>
		        </p>
	        </form>
    	</div>
	</div>

	<!-- 一覧 -->
	<div id="table_container">
		<?php echo $this->partial("/component/table.phtml", array('table'=>$table))?>
	</div>
	
	<?php echo $this->formHidden("msg", $this->msg);?>
	<?php echo $this->formHidden("popup_msg", $this->popup_msg);?>
</section>

<?php else :?>
	<!-- Ajax mode -->
	<!-- Search mode load by ajax -->
	<?php echo $this->partial("/component/table.phtml", array('table'=>$table))?>

<?php endif;?>


<?php if(!$search_mode):?>
<!-- Table script -->
<script type="text/javascript" src="/js/table.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#status").change(function(){
			refreshTable();
			return false;
		});
		
		$("#room").change(function(){
			refreshTable();
			return false;
		});
		
		$("#search_form").submit(function(){
			refreshTable();
			return false;
		});

		if($("#msg").val() != null && $("#msg").val() != ''){
			notify($("#msg").val());
		}

		if($("#popup_msg").val() != null && $("#popup_msg").val() != ''){
			openOrderCancelErrDialog();
		}

		$("#start_time").datepicker({ 
			dateFormat: 'yy-mm-dd',
			changeMonth: true,
			changeYear: true,
			showOn: "button",
			buttonImage: "/images/icons/calendar.gif",
			buttonImageOnly: true,
			onClose: function(dateText, inst) {
			}
		});

		$("#end_time").datepicker({ 
			dateFormat: 'yy-mm-dd',
			changeMonth: true,
			changeYear: true,
			showOn: "button",
			buttonImage: "/images/icons/calendar.gif",
			buttonImageOnly: true,
			onClose: function(dateText, inst) {
			}
		});
	});	

	//refresh table data
	function refreshTable(){
		var ajax_url = "/user/order/list-order";
		
		var datas = "start_time=" + $("#start_time").val();
		datas += "&search_key=" + $.trim($("#search_key").val());
		datas += "&line_per_page=" + $("#line_per_page").val();
		datas += "&page=" + $("#page").val();
		datas += "&search=1";

		if($("#status").val() != "" && $("#status").val() != undefined)
			datas += "&status=" + $("#status").val();
		if($("#room").val() != "" && $("#room").val() != undefined)
			datas += "&room=" + $("#room").val();
		
		$(".black-cell span").attr('class','loading');
		jQuery.ajax({
			  url: ajax_url,
			  type: "POST",
			  data: datas,
			  success: function(data) {
				  $("#table_container").html(data);
			  },
			  complete: function(){	
				   $(".black-cell span").attr('class','success');
			  },
			  error: function() {
				  alert("Have error when loading data from server");
			  }
		});
	}

	function openOrderCancelErrDialog()
	{
		$.modal({
			content: $("#order-cancel-err-msg").html(),
			title: '予約キャンセルエラー',
			maxWidth: 500,
			buttons: {
				"閉じる": function(win) { win.closeModal(); }
			}
		});
	}
</script>
<?php endif;?>

<div id="order-cancel-err-msg" style="display:none">
	<h3><?php echo $this->popup_msg?></h3>
</div>